<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <a href="./2.html" abcasdfas="asdfdasfdadfsasdf">go to 2.html</a>
    <input type="checkbox" checked="checked" name="" id="" />
    <p>
      what is
      <strong>dom</strong>
      ?
    </p>
    <ul>
      <li>选项1</li>
      <li>选项2</li>
      <li>选项3</li>
      <li>选项4</li>
      <li>选项5</li>
    </ul>


    <script>
      var ul = document.querySelector('ul')
      var firstChild = ul.children[0]
      var secondChild = ul.children[1]
      // 把节点2插入节点1之前
      ul.insertBefore(secondChild,firstChild)

      //删除第三个子节点
      ul.removeChild(ul.children[2])

      var lastLi = document.createElement('li')
      lastLi.innerText = "选项6"
      lastLi.style.fontSize = 20 + 'px'
      lastLi.style.color = 'red'
      lastLi.className = 'lastLi'
      ul.appendChild(lastLi)

    </script>
  </body>
</html>

